<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 挂载点 -->
    <div id="app">
        <h2>{{ msg }}</h2>
        <button @click="count++">{{ count }}</button>
    </div>


    <!-- 
        引入 Vue3 核心类库

        window.Vue  是一个对象
     -->
    <script src="./lib/vue3.global.js"></script>

    <script>
        // 创建 Vue 应用实例【不是根组件实例】
        const app = Vue.createApp({
            // 没有 el 选项，需要后续使用 应用实例 app 的 mount 方法来挂载


            // data 选项必须是 函数返回对象的形式
            //      这里的 msg、count 会代理到组件实例（vm）如何实现的？
            //            内部将 Object.defineProperty 改为 Proxy 来实现
            // ？题目：Vue3为何要才使用 Proxy 去代替 Object.defineProperty ？
            data() {
                return {
                    msg: 'Hello Vue3',
                    count: 10
                }
            }
        })

        // 挂载应用到挂载点元素
        //      返回值才是 vm 组件实例
        const vm = app.mount('#app')

        console.log('app', app)
        console.log('vm', vm)
    </script>
</body>

</html>